<template>
    <el-container v-loading.fullscreen.lock="loading">
        <el-header>
            订单信息
        </el-header>
        <el-main>
            <el-table :data="tableData">
                <el-table-column prop="key" label="项目" />
                <el-table-column prop="value" label="信息" />
            </el-table>
        </el-main>
        <el-footer>
            <el-button @click="refreshAndGetDetail">刷新</el-button>
            <el-button type="primary" v-if="showNext" @click="goToRedirect">下一步</el-button>
        </el-footer>
    </el-container>
</template>

<script>
    import {getOrderDetail, refreshOrderDetail} from "@/api/order";

    export default {
        name: "OrderDisplay",
        props: [ 'id', 'redirect' ],
        data() {
            return {
                loading: true,
                tableData: [],
                paid: false,
            };
        },
        computed: {
            showNext() {
                return !!this.redirect && this.paid;
            }
        },
        methods: {
            getDetail() {
                this.loading = true;
                return getOrderDetail(this.id).then(value => {
                    this.tableData = [];
                    if (value.status === 200) {
                        this.tableData.push({
                            key: '订单号',
                            value: value.data.out_trade_no,
                        });
                        this.tableData.push({
                            key: '支付宝订单号',
                            value: value.data.trade_no,
                        });
                        this.tableData.push({
                            key: '支付宝账号',
                            value: value.data.buyer_id,
                        });
                        this.tableData.push({
                            key: '支付状态',
                            value: value.data.trade_status,
                        });
                        this.tableData.push({
                            key: '支付金额',
                            value: value.data.total_amount,
                        });
                        this.paid = value.data.trade_status === 'TRADE_SUCCESS'
                            || value.data.trade_status === 'TRADE_FINISHED';
                    } else if (value.status === 404) {
                        this.$alert('订单未找到').catch(() => {});
                    } else {
                        this.$alert('服务器错误').catch(() => {});
                    }
                    return new Promise(resolve => resolve());
                }).catch(reason => {
                    this.$alert('发生错误：' + JSON.stringify(reason))
                        .catch(() => {});
                }).finally(() => {
                    this.loading = false;
                });
            },
            refresh() {
                this.loading = true;
                return refreshOrderDetail(this.id).then(value => {
                    if (value.status !== 204) {
                        this.$alert('服务器错误').catch(() => {});
                    }
                    return new Promise(resolve => resolve());
                }).catch(reason => {
                    this.$alert('发生错误：' + JSON.stringify(reason))
                        .catch(() => {});
                }).finally(() => {
                    this.loading = false;
                });
            },
            refreshAndGetDetail() {
                this.refresh().then(() => {
                    this.getDetail();
                });
            },
            goToRedirect() {
                window.location = this.redirect;
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.getDetail();
            });
        }
    }
</script>

<style scoped>

</style>
